import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createHtmlPlugin } from 'vite-plugin-html'
import postcssPresetEnv from 'postcss-preset-env'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'
import postCssPxToRem from 'postcss-pxtorem'
import { terser } from 'rollup-plugin-terser';
// import basicSsl from '@vitejs/plugin-basic-ssl'

// 获取当前时间戳
const timestamp = Date.now();

export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd(), "")
    return {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src')
            },
            extensions: ['.js', '.jsx', '.json', '.mjs'],
        },
        plugins: [
            // {
            //   order: 1, // 使用 order 选项指定生成顺序
            //   transform: (html) => html,
            // },
            vue(),
            // basicSsl(),
            createHtmlPlugin({
                minify: true,
                template: 'index.html',
                inject: {
                    data: {
                        title: '',
                    }
                },
            }),
            AutoImport({
                imports: [
                    'vue',
                    'vue-router',
                ],
                // dirs: ['@/components/Layout']
            }),
            Components({
                resolvers: [VantResolver()],
            }),
        ],
        css: {
            // 预处理器的配置选项
            // preprocessorOptions: {
            //   scss: {
            // // 全局变量或引入全局变量名
            // additionalData: `$injectedColor: orange;`
            //   }
            // },
            postcss: {
                plugins: [
                    postcssPresetEnv(),
                    postCssPxToRem({
                        rootValue: 37.5, // 这个是根据设计稿的，如果是安装75那就直接75
                        propList: ['*']
                    })
                ]
            }
        },
        server: {
            port: 5174,
            host: '0.0.0.0',
            open: true, //vite项目启动时自动打开浏览器
            proxy: {
              '/api': {
                // 配置接口调用目标地址
                target: env.VITE_BASE_API,
                // 当进行代理时，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                changeOrigin: true,
                // 替换target中的请求地址，请求时以 /api 开头
                rewrite: path => path.replace(/^\/api/, ''),
               }
            }
        },
        // base: './',  // 这样配置会让资源的路径变为相对路径 正式环境要注释
        define: {
            __BUILD_TIMESTAMP__: JSON.stringify(timestamp),
         },
        build: {
            // 构建后是否生成 source map 文件, boolean | 'inline' | 'hidden'
            sourcemap: false,
            //自定义底层的 Rollup 打包配置
            rollupOptions: {
                // external: ['@chenfengyuan/vue-qrcode'],
                output: {
                    // publicPath: '',  // 或者设置成相对路径，例如 './'
                    // chunkFileNames: 'static/js/[name]-[hash].js',
                    // entryFileNames: "static/js/[name]-[hash].js",
                    // assetFileNames: "static/[ext]/[name]-[hash].[ext]"
                    chunkFileNames: `static/js/[name]-${timestamp}-[hash].js`,
                    entryFileNames: `static/js/[name]-${timestamp}-[hash].js`,
                    assetFileNames: `static/[ext]/[name]-${timestamp}-[hash].[ext]`,
                },
                plugins: [
                    terser({
                      compress: {
                        drop_console: true, // 关闭所有的 console.log 打印
                      },
                    }),
                  ],
            }
        }
    }
})